<template>
  <div>
    <p>响应式对象 obj : {{ obj.name }}</p>
    <p>对象解构:错误情况: {{name1}}</p>
    <p>转换后的对象:正确写法 : {{name2}}</p>
    <button @click="update">修改obj里面的name</button>
  </div>
</template>

<script setup>
import { reactive,toRefs } from 'vue';
const obj=reactive({
  name:'85期',
  type:'前端'
})
// 对象和数组解构批量给变量赋值时会使响应式对象里面的属性失去响应式
const {name:name1,type:type1}=obj
// toRefs可以给响应式里面的属性和源对象增加响应式的链接
const {name:name2,type:type2}=toRefs(obj)
// 给对象里的全部属性添加响应式
const name3 = toRefs(obj,'name')
const update = () => {
  obj.name = '嘿嘿爷明年继续读'}
</script>